<template>
    <div class="index-nav">
        <!--        <a href="#">首页</a>-->
        <div href="#">
            <el-row class="block-col-2">
                <el-col>
                    <a class="demonstration green" href="/index">首页</a>
                    <el-dropdown>
                        <a class="el-dropdown-link black">下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                        </a>

                        <el-dropdown-menu slot="dropdown">
                            <!--  留一个做参考-->
<!--                            <el-dropdown-item>黄金糕</el-dropdown-item>-->
                            <el-dropdown-item  v-for="(v,i) in list" :key="i">{{v.title}}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <a class="demonstration black">激活</a>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {indexNav} from "../api";

    export default {
        name: "indexNav",
        methods: {},
        data() {
            return {
                list: []
            }
        },
        created() {
            indexNav(1).then(res => {
                // console.log(res.rows);
                this.list = res.rows
                // console.log(this.list)
            })
        }
    }
</script>

<style scoped lang="less">
    .index-nav {
        /*margin: 10px auto 0px;*/
        float: left!important;
        width: 100%;
    }

    /*导航相关*/
    .el-dropdown-link {
        cursor: pointer;
        color: black;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }

    .demonstration {
        display: block;
        float: left;
        color: #8492a6;
        font-size: 14px;
        text-decoration: none;
        /*margin-bottom: 20px;*/
    }

    /*    导航修改*/
    /*小导航右浮动*/
    .el-dropdown {
        float: left;
    }

    /*内容设定*/
    .el-col a {
        font-size: 16px;
        padding-right: 30px;
        float: left;
    }

    /*下拉菜单相关*/
    li:hover {
        color: @colorGreen !important;
        background-color: #e3f6f1 !important;
    }

    /*    公共class*/
    @colorGreen: rgb(5, 219, 149);
    .green {
        color: @colorGreen;
    }

    .black {
        color: black;
    }
</style>